<template>

  <div class="app-header-fixed app-aside-fixed h-full">

    <el-row class="h-full">
      <el-col :span="3" class="h-full">
          <!--Menu -->
          <app-sider :open="open"></app-sider>
          <!--/ Menu -->
      </el-col>

      <el-col :span="21">
          <!--Header -->
          <app-header v-on:clickfn = "getOpen"></app-header>
          <!--/ Header -->

          <!-- content -->
          <div class="app-content" :class="{'nav-hide': !open}">
            <a href class="off-screen-toggle hide" ui-toggle-class="off-screen" data-target=".app-aside" ></a>
            <div class="app-content-body">
                <transition>
                    <router-view></router-view>
                </transition>
            </div>
          </div>
          <!-- /content -->
      </el-col>
    </el-row>
  </div>

</template>

<script>

  export default {
    data () {
      return {
        app :{
          name: 'Paas',
          version: '1.3.3',
          color: {
            primary: '#7266ba',
            info:    '#23b7e5',
            success: '#27c24c',
            warning: '#fad733',
            danger:  '#f05050',
            light:   '#e8eff0',
            dark:    '#3a3f51',
            black:   '#1c2b36'
          },
          settings: {
            themeID: 1,
            navbarHeaderColor: 'bg-black',
            navbarCollapseColor: 'bg-white-only',
            asideColor: 'bg-black',
            asideSubColor: 'bg-light',
            headerFixed: true,
            asideFixed: false,
            asideFolded: false,
            asideDock: false,
            container: false
          }
        },
        open:true
      }
    },
    methods: {
        getOpen(msg){
            console.log(msg)
            this.open = msg;
//            console.log(this.$children)
        }
    },
    components: {
      "appHeader":require('./../blocks/appHeader.vue'),
      "appSider":require('./../blocks/appSider.vue')
    }
  }
</script>

<style>
  body {
    font-family: Helvetica, sans-serif;
  }

  #loginForm{
    margin:0px auto;
    margin-top: 10%;
    width: 40%;
  }

  #loginLogo img{
    display: block;
    margin: 0 auto;
  }

    .app-content{
        padding-top: 50px;
        margin-left: 0px;
        transition: margin-left 0.2s ease;
        -webkit-transition: margin-left 0.2s ease;
        -moz-transition: margin-left 0.2s ease;
        -o-transition: margin-left 0.2s ease;
    }

</style>